<template>
	<view class="seeEmail" :class="APPTheme">
		<uni-nav-bar fixed status-bar rightText="▪▪▪" left-icon="back" title="邮件详情" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickRight="clickRightFn" @clickLeft="clickLeftback"></uni-nav-bar>
		<view class="center-item theme-border-bottom">
			<view class="item-left">发件人:</view>
			<view class="item-center">
				{{emailData.sendUser}}
			</view>
		</view>
		<view class="center-item theme-border-bottom">
			<view class="item-left">收件人:</view>
			<view class="item-center">
				{{emailData.receiveUser}}
			</view>
		</view>
		<view class="center-item theme-border-bottom">
			<view class="item-left">抄送人:</view>
			<view class="item-center">
				{{emailData.copySendUser}}
			</view>
		</view>
		<view class="center-item theme-border-bottom">
			<view class="item-left">主题:</view>
			<view class="item-center">
				{{emailData.mailSubject}}
			</view>
		</view>
		<view class="center-item theme-border-bottom">
			<view class="item-left">日期:</view>
			<view class="item-center">
				{{emailData.sendTime}}
			</view>
		</view>
		<lz-editor :content="emailData.mailContentDelta" :htmlContent="emailData.htmlContent" v-if="emailData.mailContentDelta||emailData.htmlContent" readOnly></lz-editor>
		<uni-swipe-action >
			<uni-swipe-action-item disabled v-for="(item,index) in update.list" :key="index" >
				<view class="swipe-action-item theme-bg theme-border-bottom-auto theme-bg-active">
					<uni-list>
						<uni-list-item :thumb="computedFileType(item)" :title="item.fileName" :note="computeFileSize(item.fileSize)" rightText="查看" @click="seeFileFn(item)"></uni-list-item>
					</uni-list>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		
		<view class="email-foot theme-bg" :class="showPopup?'email-foot-show':''">
			<view class="foot-list theme-border-top-auto">
				<view class="foot-list-item theme-bg-active" v-for="(item,index) in footAction.list" :key="index" @click="footActionFn(item)">
					<view class="iconfont" :class="item.icon"></view>
					<view class="text" :class="'text'+item.icon">{{item.text}}</view>
				</view>
			</view>
		</view>
		<!-- 移动到 -->
		<u-popup ref="moveShow" mode="bottom" :border-radius='40' closeable >
			<view class="u-popup" >
				<view class="u-popup-top">移动到</view>
				<lz-list :list="drawer.mailbox" title="邮箱文件夹" active-color="rgba(0,122,255,0.5)" :disabledId="drawer.mailBoxId" @click="moveFn" ></lz-list>
				<lz-list :list="drawer.follow" title="我新建的文件夹" active-color="rgba(0,122,255,0.5)" :activeId="drawer.mailBoxId" @click="moveFn" height="380rpx"></lz-list>
			</view>
		</u-popup>
		<!-- 上传 -->
		<l-file ref="lFile" top="75px"></l-file>
		<image class="qssImage" v-if="qss.animate_jiemi" src="/static/image/qss/jiemi.gif"></image>
	</view>
</template>

<script>
let that
import {
	mapGetters,
	mapActions
} from 'vuex'
export default {
	components:{
	},
	data() {
		return {
			showPopup:false,
			id:'',
			emailData:'',
			update:{
				list:[],
			},
			//抽屉
			drawer:{
				mailBoxId:1,//当前选择的
				mailBoxName:'收件箱',//当前选择的
				//邮箱文件夹
				mailbox:[{
					name:'收件箱',
					mailBoxId:1,
					id:1,
					icon:'icon-shoujianxiang',
					color:'#0088fe'
				},
				{
					name:'草稿箱',
					mailBoxId:5,
					id:5,
					icon:'icon-caogaoxiang',
					color:'#ff7c00'
				},
				{
					name:'发件箱',
					mailBoxId:4,
					id:4,
					icon:'icon-yifasong',
					color:'#15bc84'
				},
				{
					name:'已删除',
					mailBoxId:6,
					id:6,
					icon:'icon-yishanchu',
					color:'#ff9f00'
				},
				{
					name:'红旗邮箱',
					icon:'icon-genjin',
					mailBoxId:3,
					id:3,
					color:'#ff3908'
				},
				{
					name:'星标邮箱',
					icon:'icon-guanzhu',
					mailBoxId:2,
					id:2,
					color:'#0088fe'
				}
				],
				//我新建的文件夹
				follow:[
				// {
				// 	name:'跟进事项',
				// 	id:"022",
				// 	icon:'icon-wenjianjia1',
				// 	color:'#ff7c00'
				// }
				]
			},
			footAction:{
				list:[{
					text:'回复',
					icon:'icon-weidu1',
				},
				{
					text:'转发',
					icon:'icon-zhuanfa2',
				},
				{
					text:'标星标',
					icon:'icon-guanzhu',
				},
				{
					text:'删除',
					icon:'icon-yishanchu',
				},
				{
					text:'移动到',
					icon:'icon-zhuanfa',
				}]
			},
			qss:{
				animate_jiemi:false,
			},
		}
	},
	computed: {
		...mapGetters(['APPTheme', 'userInfo', 'api']),
		//计算图片属性
		computedFileType(){
			return (item)=>{
				return that.$lizhao.lzfile.lzGetFileType(item.suffix)
			}
		},
		//计算文件大小
		computeFileSize(){
			return (size)=>{
				return that.$lizhao.lzfile.lzGetFileSize(size)
			}	
		}
	},
	onLoad(e) {
		that = this
		that.id=e.id
		//获取邮件详情
		that.mailRead()
	},
	onShow() {
		//设置主题颜色
		that.GLOBAL.setThemeColor(that.APPTheme)
	},
	//物理返回
	onBackPress(event){
		uni.$emit('refresh_email_vue')
	},
	methods: {
		//查看文件
		seeFileFn(item){
			console.log(item);
			//获取文件类型
			let type=that.$lizhao.lzfile.lzGetTypeSuffix(item.suffix)
			if(item.qss&&item.qss=='GK'){//国科量子解密
				that.gk_Qss_decryption(item,type)
			}else{//非量子解密
				that.notQssDecode(item,type)
			}
		},
		//无解密查看文件
		notQssDecode(item,type){
			if(type=='image'){
				uni.previewImage({
					urls:[that.GLOBAL.image_svr+item.path],
				})
			}else if(type=='word'){
				// that.$refs.lFile.open(that.GLOBAL.image_svr+item.path)
				//#ifdef APP-PLUS
					that.$refs.lFile.download(that.GLOBAL.image_svr+item.path).then(res=>{
						that.$refs.lFile.open(res)
					})
				//#endif
				//#ifdef H5
					that.$refs.lFile.open(that.GLOBAL.image_svr+item.path)
				//#endif
			}else if(type=='video'){
				uni.navigateTo({url: '/pages/template/video/video?url='+that.GLOBAL.image_svr+item.path});
			}else if(type=='audio'){
				uni.navigateTo({url: '/pages/template/audio/audio?url='+that.GLOBAL.image_svr+item.path+'&time='+item.time});
			}
		},
		//gk量子解密
		async gk_Qss_decryption(item,type){
			//开启解密动画
			that.qss.animate_jiemi=true
			//需要传入解密的字符串和秘钥secretKey【附件解密】
			let base64=await that.$lizhao.QSS.SM4DecryptBigDataEnclosure(that.GLOBAL.image_svr + item.path,item.secretKey)
			console.log(base64.slice(0,55));
			if(!base64){//解密异常
				//关闭解密动画
				that.qss.animate_jiemi=false
				return
			}
			if(type=='image'||type=='video'||type=='audio'){
				/**
				 * 实现思路：
				 * 视频和音频拿到base64，可通过h5方式将base64转成blob对象
				 * 再通过URL.createObjectURL(blob)生成指向File对象或Blob对象的URL，
				 * 此url可以放到大部分标签下的src中进行渲染，如img，video，audio
				 * */
				uni.navigateTo({url: '/pages/document/filePlay/filePlay?type='+type+'&base64='+encodeURIComponent(base64)});
				//关闭解密动画
				that.qss.animate_jiemi=false
			}else if(type=='word'){
				/**
				 * 实现思路：
				 * 通过native.js的io操作创建文件，拿到平台绝对路径
				 * 再通过原生类进行base64解码，拿到字节流bytes数组
				 * 在通过java类FileOutputStream进行文件写入bytes返回文件路径path
				 * 在通过plus.runtime.openFile(path);用第三方程序打开文件
				 * */
				// 写入字节输出流传入base64和要写入的文件名称如lizhao222.doc
				let path=await that.$lizhao.lzfile.lzFileWriter(base64,item.filingName)
				console.log(path);
				plus.runtime.openFile(path);
				//关闭解密动画
				that.qss.animate_jiemi=false
			}
		},
		clickRightFn(){
			that.showPopup=!that.showPopup
		},
		//移动到
		moveFn(item){
			console.log('移动到',item);
			if(item.type=='listItem'){
				let req={
					mailBoxId:item.center.id,//移动到文件夹id
					ids:that.emailData.id//要移动的文件
				}
				
				that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_move,req).then(res=>{
					if(res.code=='0'){
						that.$refs.moveShow.close()
						uni.navigateBack({
							delta: 1
						});
						setTimeout(()=>{
							uni.showToast({
								title: res.data.msg,
								icon:'none'
							});
						},200)
					}
				})
				
			}
		},
		//获取新建文件夹列表
		getmailBoxlist(){
			that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mailBox_listBox,{}).then(res=>{
				if(res.code=='0'){
					that.drawer.follow=res.data.map(data=>{
						return {
							name:data.boxName,
							icon:'icon-wenjianjia1',
							color:'#15bc84',
							...data,
						}
					})
				}
			})
		},
		//底部操作菜单
		footActionFn(e){
			console.log(e);
			if(e.text=='删除'){
				if(that.emailData.mailBoxId==6){//草稿箱删除彻底删除
					that.deleteEmail('彻底删除')
				}else{//逻辑删除
					//删除邮件
					that.deleteEmail('逻辑删除')
				}
			}else if(e.text=='移动到'){
				that.getmailBoxlist()
				that.$refs.moveShow.open()
			}else if(e.text=='回复'){
				that.clickRightclose(e.text)
			}else if(e.text=='转发'){
				that.clickRightclose(e.text)
			}else if(e.text=='标星标'||e.text=='标红旗'){
				//加星标或加红旗
				let req={
					type:'listItem',
					center:{
						id:e.text=='标星标'?2:3
					}
				}
				that.moveFn(req)
			}
		},
		//删除邮件
		deleteEmail(type){
			console.log(type);
			let url=''
			if(type=='彻底删除'){
				url=that.api.GLOBAL_rest_vmail_mail_deleteMail
			}else{
				url=that.api.GLOBAL_rest_vmail_mail_delete
			}
			that.GLOBAL.doGet(url,{ids:that.emailData.id}).then(res=>{
				if(res.code=='0'){
					uni.navigateBack({
						delta: 1
					});
					setTimeout(()=>{
						uni.showToast({
							title: res.data.msg,
							icon:'none'
						});
					},200)
				}
			})
		},
		//获取邮件详情
		mailRead(){
			let req={
				id:that.id
			}
			that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_read,req).then(res=>{
				if(res.code=='0'){
					that.update.list=res.data.filesList
					that.drawer.mailBoxId=res.data.mail.mailBoxId
					if(res.data.mail.qss&&res.data.mail.qss=='GK'){
						//国科解密
						that.gk_qss_decrypet(res.data.mail)
					}else{
						if(res.data.mail.mailContentDelta){
							res.data.mail.mailContentDelta=JSON.parse(res.data.mail.mailContentDelta)
							
						}
						that.emailData=res.data.mail
						
					}
					
				}
				
			})
		},
		//国科解密
		gk_qss_decrypet(mail){
			//开启解密动画
			that.qss.animate_jiemi=true
			setTimeout(async()=>{
				let mailContent=JSON.parse(mail.mailContent)
				mailContent=await that.$lizhao.QSS.SM4DecryptBigDataText(mailContent.data,mailContent.key)//需要传入解密的字符串和秘钥secretKey
				mailContent=that.$lizhao.QSS.QSSBase64(mailContent.data)
				let htmlContent=JSON.parse(mail.htmlContent)
				htmlContent=await that.$lizhao.QSS.SM4DecryptBigDataText(htmlContent.data,htmlContent.key)//需要传入解密的字符串和秘钥secretKey
				htmlContent=that.$lizhao.QSS.QSSBase64(htmlContent.data)
				let mailContentDelta=JSON.parse(mail.mailContentDelta)
				mailContentDelta=await that.$lizhao.QSS.SM4DecryptBigDataText(mailContentDelta.data,mailContentDelta.key)//需要传入解密的字符串和秘钥secretKey
				mailContentDelta=that.$lizhao.QSS.QSSBase64(mailContentDelta.data)
				let mailSubject=JSON.parse(mail.mailSubject)
				mailSubject=await that.$lizhao.QSS.SM4DecryptBigDataText(mailSubject.data,mailSubject.key)//需要传入解密的字符串和秘钥secretKey
				mailSubject=that.$lizhao.QSS.QSSBase64(mailSubject.data)
				let req={
					...mail,
					mailContent,
					htmlContent,
					mailContentDelta,
					mailSubject,
				}
				that.emailData=req
				console.log(that.emailData);
				that.qss.animate_jiemi=false
			},2000)
		},
		//返回
		clickLeftback(){
			uni.navigateBack({
				delta: 1
			});
		},
		//回复
		clickRightclose(name){
			uni.navigateTo({
				url: '../writeEmail/writeEmail?id='+that.id+'&name='+name,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
			
		},
	}
};
</script>

<style scoped lang="scss">
.seeEmail{
	height: 100%;padding-bottom: 52px;box-sizing: border-box;
	.center-item{
		display: flex;justify-content: space-between;align-items: center; font-size: $font_size-12;box-sizing: border-box;font-weight: bold;
		padding: 10px 15px;
		.item-left{
			width: 50px;display: flex;align-items: center;text-align: right;
		}
		.item-center{
			flex: 1;display: flex;flex-wrap: wrap;align-items: center;
			.tag{
				margin-left: 5px;margin-top: 5px;
			}
		}
	}
	.swipe-action-item{
		width: 100%;padding:0 10px;box-sizing: border-box;
	}
	.email-foot{
		position: fixed;bottom: 0;left: 0;right: 0;transition: all 0.5s;height: 0;
		.foot-list{
			display: flex;font-size: 12px;justify-content: space-between;width: 100%;padding: 5px 15px;box-sizing: border-box;
			.foot-list-item{
				display: flex;flex-direction: column;align-items: center;padding:2px 5px;
				.text{
					color: #888;
				}
				.icon-weidu1,.texticon-weidu1{
					color: #007AFF;
				}
				.icon-zhuanfa2,.texticon-zhuanfa2{
					color: #a514ff;
				}
				.icon-guanzhu,.texticon-guanzhu{
					color: #ff7c00;
				}
				.icon-yishanchu,.texticon-yishanchu{
					color: #15bc84;
				}
				.icon-zhuanfa,.texticon-zhuanfa{
					color: #ff9f00;
				}
				.iconFontColor{
					color: #888;
				}
				
				.iconfont{
					font-size: 22px;
				}
			}
			
		}
	}
	.email-foot-show{
		height: 52px;
	}
	//底部弹出层
	.u-popup{
		height: 80vh;
		.u-popup-top{
			text-align: center;padding:28rpx 30rpx;box-sizing: border-box;font-weight: bold;font-size: 15px;
		}
		.u-popup-seve{
			position: absolute;left: 36rpx;top:28rpx;font-size: 15px;color: #007AFF;
		}
		.center-list-item{
			display: flex;padding:20rpx 30rpx;align-items: center;line-height: 40rpx;box-sizing: border-box;width: 100%;
			.item-left{
				width:20px;height: 40rpx;padding:10rpx 20rpx;display: flex;align-items: center;justify-content: center;position: relative;
			}
			.item-right{
				font-size: 14px;box-sizing: border-box;width: 570rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: flex;
				.iconfont{
					color: #15bc84;margin-right: 5px;font-size: 20px;
				}
			}
		}
	}
	.qssImage{
		position: fixed;top: 0;bottom: 0;left: 0;right: 0;height: 800rpx;width: 100%;margin: auto;
	}
}
</style>
